/** {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

    *:focus {
        outline: none !important;
    }

body {
    background: #fff;
    font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    color: #857567;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    background: white;
    height: 100%;
}


    main aside {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        height: calc(100% / 3);
        padding: 12px;*/
        /*                background: #DFB72C url("https://images.unsplash.com/photo-1443131307017-4097c8ac7763?dpr=2&auto=format&fit=crop&w=1500&h=1909&q=80&cs=tinysrgb") no-repeat center center/cover;*/
        /*        background: #DFB72C url("https://cdn.pixabay.com/photo/2023/06/24/07/04/ai-generated-8084659_1280.jpg") no-repeat center center/cover;*/
        /*background: #DFB72C url("../Images/ambu.JPG") no-repeat center center/cover;
    }

        main aside div:empty {
            opacity: 0.3;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            background-blend-mode: screen;
        }

        main aside svg {
            position: relative;
            margin-top: 190px;
            width: 150px;
            height: 150px;
        }

        main aside div:not(:empty) {
            position: relative;
            width: 100%;
            margin-top: -24px;
        }

        main aside p {
            position: relative;
            width: 100%;
            margin: 0;
            color: white;
            font-size: 18px;
            line-height: 1.2;
            text-align: center;
            text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
        }

            main aside p strong {
                font-weight: 700;
            }

            main aside p:nth-child(2) {
                position: absolute;
                top: 0;
                left: 0;
            }

            main aside p.active {
                visibility: visible;
                opacity: 1;
                transform: none;
            }

            main aside p:not(.active) {
                visibility: hidden;
                opacity: 0;
                transform: translateY(100px);
            }

    main section {
        position: relative;
        height: calc(100% / 3 * 2);
    }

        main section h1 {
            display: flex;
            justify-content: center;
            padding: 12px;
            color: #7d1f9f;
            font-size: 25px;
            line-height: 1;
            text-align: center;
            text-transform: uppercase;
        }

            main section h1 a {
                display: block;
                margin: 0 6px;
                cursor: pointer;
                transform: none;
            }

                main section h1 a:hover, main section h1 a:focus {
                    color: #976a36;
                }

                main section h1 a:active {
                    color: #857567;
                }

                main section h1 a.active {
                    font-weight: 500;
                }

                main section h1 a:not(.active) {
                    font-weight: 300;
                }

        main section form {
            display: flex;
            flex-flow: row wrap;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: calc(100% - 110px);
        }

            main section form > div, main section form > ul {
                width: 100%;
                padding: 6px;
            }

            main section form fieldset {
                padding: 6px;
                margin-bottom: 15px;
                border: none;
            }

                main section form fieldset div {
                    display: flex;
                    border-radius: 2px;
                    overflow: hidden;
                }

                    main section form fieldset div label {
                        display: block;
                        margin: 0;
                        padding: 6px 9px;*/
                        /*  background: #d62323;*/
                        /*background: linear-gradient(to right, #a11b7e, #7b1fa1);
                        color: white;
                        font-size: 16px;
                        cursor: pointer;
                        line-height: 25px;
                    }

                    main section form fieldset div input {
                        display: block;
                        background: white;
                        border: 1px solid #DFB72C;
                        border-left: 0;
                        border-radius: 0 2px 2px 0;
                        box-shadow: none;
                        margin: 0;
                        padding: 6px 9px;
                        width: 100%;
                        color: #857567;
                        font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
                        font-size: 16px;
                    }

                        main section form fieldset div input::-moz-placeholder {
                            color: rgba(133, 117, 103, 0.4);
                        }

                        main section form fieldset div input:-ms-input-placeholder {
                            color: rgba(133, 117, 103, 0.4);
                        }

                        main section form fieldset div input::placeholder {
                            color: rgba(133, 117, 103, 0.4);
                        }

                        main section form fieldset div input:focus {
                            background: rgba(233, 226, 213, 0.5);
                        }

                            main section form fieldset div input:focus::-moz-placeholder {
                                color: rgba(133, 117, 103, 0.6);
                            }

                            main section form fieldset div input:focus:-ms-input-placeholder {
                                color: rgba(133, 117, 103, 0.6);
                            }

                            main section form fieldset div input:focus::placeholder {
                                color: rgba(133, 117, 103, 0.6);
                            }

            main section form li {
                padding: 6px;
            }

                main section form li button {
                    display: block;
                    margin: 0 auto;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
                    border: 0;
                    border-radius: 100px;
                    color: white;
                    font-size: 16px;
                    padding: 6px 12px;
                    cursor: pointer;
                }


            main section form input[type=submit] {
                display: block;
                align-self: flex-end;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 100%;
                margin-bottom: -16px;
                border: 0;
                border-radius: 0;
                font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
                font-size: 20px;*/
                /* text-transform: lowercase;*/
                /*line-height: 2;*/
                /* background: #ff0000;*/
                /*background: linear-gradient(to right, #a11b7e, #7b1fa1);
                color: white;
                cursor: pointer;
            }

                main section form input[type=submit]:hover, main section form input[type=submit]:focus {
                    background: #620985;
                }

                main section form input[type=submit]:active {
                    background: #000;
                }

            main section form.active {
                opacity: 1;
                z-index: 1;
            }

                main section form.active fieldset, main section form.active li, main section form.active input[type=submit] {
                    transform: translateY(0px);
                    opacity: 1;
                }

            main section form:not(.active) {
                opacity: 0;
                z-index: 0;
            }

                main section form:not(.active) fieldset, main section form:not(.active) li, main section form:not(.active) input[type=submit] {
                    transform: translateY(100px);
                    opacity: 0;
                }

    main.with-hover aside p {
        transition: all 250ms ease-out;
    }

    main.with-hover section h1 a {
        transition: all 150ms ease-out;
    }

        main.with-hover section h1 a:hover, main.with-hover section h1 a:focus {
            transition: all 300ms ease-out;
        }

        main.with-hover section h1 a:active {
            transition: all 150ms ease-in;
        }

    main.with-hover section form {
        transition: all 1000ms ease-out;
    }

        main.with-hover section form fieldset, main.with-hover section form li, main.with-hover section form input[type=submit] {
            transition: all 300ms ease-out;
        }

        main.with-hover section form button, main.with-hover section form input {
            transition: all 150ms ease-out;
        }

            main.with-hover section form button:hover, main.with-hover section form button:focus, main.with-hover section form input:hover, main.with-hover section form input:focus {
                transition: all 300ms ease-out;
            }

            main.with-hover section form button:active, main.with-hover section form input:active {
                transition: all 150ms ease-in;
            }

        main.with-hover section form.active#form-signup fieldset:nth-child(2) {
            transition-delay: 50ms;
        }

        main.with-hover section form.active#form-signup fieldset:nth-child(3) {
            transition-delay: 100ms;
        }

        main.with-hover section form.active#form-signup li:nth-child(1) {
            transition-delay: 150ms;
        }

        main.with-hover section form.active#form-signup li:nth-child(2) {
            transition-delay: 200ms;
        }

        main.with-hover section form.active#form-signup input[type=submit] {
            transition-delay: 250ms;
        }

        main.with-hover section form.active#form-login fieldset:nth-child(2) {
            transition-delay: 50ms;
        }

        main.with-hover section form.active#form-login li:nth-child(1) {
            transition-delay: 100ms;
        }

        main.with-hover section form.active#form-login li:nth-child(2) {
            transition-delay: 150ms;
        }

        main.with-hover section form.active#form-login input[type=submit] {
            transition-delay: 200ms;
        }

        main.with-hover section form:not(.active)#form-signup fieldset:nth-child(1) {
            transition-delay: 250ms;
        }

        main.with-hover section form:not(.active)#form-signup fieldset:nth-child(2) {
            transition-delay: 200ms;
        }

        main.with-hover section form:not(.active)#form-signup fieldset:nth-child(3) {
            transition-delay: 150ms;
        }

        main.with-hover section form:not(.active)#form-signup li:nth-child(1) {
            transition-delay: 100ms;
        }

        main.with-hover section form:not(.active)#form-signup li:nth-child(2) {
            transition-delay: 50ms;
        }

        main.with-hover section form:not(.active)#form-login fieldset:nth-child(1) {
            transition-delay: 200ms;
        }

        main.with-hover section form:not(.active)#form-login fieldset:nth-child(2) {
            transition-delay: 150ms;
        }

        main.with-hover section form:not(.active)#form-login li:nth-child(1) {
            transition-delay: 100ms;
        }

        main.with-hover section form:not(.active)#form-login li:nth-child(2) {
            transition-delay: 50ms;
        }

    main.pre-enter aside {
        transform-origin: center top;
        transform: scaleY(0);
        visibility: hidden;
    }

        main.pre-enter aside svg {
            transform-origin: center center;
            transform: scale(0) rotate(90deg);
            visibility: hidden;
        }

        main.pre-enter aside p.active {
            opacity: 0;
            transform: translateY(100px);
            visibility: hidden;
        }

    main.pre-enter section h1 a {
        visibility: hidden;
        opacity: 0;
    }

        main.pre-enter section h1 a:first-child {
            transform-origin: right center;
            transform: translateX(200px) scaleX(0);
        }

        main.pre-enter section h1 a:last-child {
            transform-origin: left center;
            transform: translateX(-200px) scaleX(0);
        }

    main.pre-enter section form fieldset, main.pre-enter section form li {
        opacity: 0;
        transform: translateY(100px);
        visibility: hidden;
    }

    main.pre-enter section form input[type=submit] {
        transform-origin: center bottom;
        transform: scaleY(0);
        color: #DFB72C;
        visibility: hidden;
    }

    main.on-enter aside {
        -webkit-animation: scaleYIn 1000ms linear forwards;
        animation: scaleYIn 1000ms linear forwards;
        visibility: visible;
    }

        main.on-enter aside svg {
            -webkit-animation: bounceIn-rotate 1000ms linear forwards 250ms;
            animation: bounceIn-rotate 1000ms linear forwards 250ms;
            visibility: visible;
        }

        main.on-enter aside p.active {
            -webkit-animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
            animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
            visibility: visible;
        }

    main.on-enter section h1 a {
        visibility: visible;
    }

        main.on-enter section h1 a:first-child {
            -webkit-animation: scaleX-slideInRight 1000ms linear forwards 750ms;
            animation: scaleX-slideInRight 1000ms linear forwards 750ms;
        }

        main.on-enter section h1 a:last-child {
            -webkit-animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
            animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
        }

    main.on-enter section form fieldset, main.on-enter section form li {
        -webkit-animation: slideInUp-fadeIn 1000ms linear forwards;
        animation: slideInUp-fadeIn 1000ms linear forwards;
        visibility: visible;
    }

        main.on-enter section form fieldset:nth-child(1) {
            -webkit-animation-delay: 1250ms;
            animation-delay: 1250ms;
        }

        main.on-enter section form fieldset:nth-child(2) {
            -webkit-animation-delay: 1350ms;
            animation-delay: 1350ms;
        }

        main.on-enter section form fieldset:nth-child(3) {
            -webkit-animation-delay: 1450ms;
            animation-delay: 1450ms;
        }

        main.on-enter section form li:nth-child(1) {
            -webkit-animation-delay: 1550ms;
            animation-delay: 1550ms;
        }

        main.on-enter section form li:nth-child(2) {
            -webkit-animation-delay: 1650ms;
            animation-delay: 1650ms;
        }

    main.on-enter section form input[type=submit] {
        -webkit-animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
        animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
        visibility: visible;
    }

@media (min-width: 768px) {
    body {*/
        /*         display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        background: #b8b4b1;*/
        /* background: linear-gradient(to right, #a11b7e80, #7b1fa1c2);*/
         /*background: linear-gradient(135deg, #e9dee6 0%, #c790bc80 25%, #621d88b3 50%, #efc1edc2 75%, #e2e2e2);*/
        /*background-color: #e499ff;
        background-image: radial-gradient(at 47% 69%, hsla(17,62%,65%,1) 0px, transparent 50%), radial-gradient(at 9% 32%, hsla(222,75%,60%,1) 0px, transparent 50%);*/
    
    /*}

    main {
        display: flex;
        border-radius: 2px;
        overflow: hidden;
        width: 720px;
        height: 100%;
        max-height: 530px;
        box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
        margin: 100px 0px 0px 380px;
    }

        main aside, main section {
            height: 100%;
            width: 360px;
        }

        main.pre-enter {
            opacity: 0;
            visibility: hidden;
        }

            main.pre-enter aside {
                transform: none;
            }

        main.on-enter {
            -webkit-animation: slideDown-fadeIn 1000ms linear forwards;
            animation: slideDown-fadeIn 1000ms linear forwards;
            visibility: visible;
        }

            main.on-enter aside {
                -webkit-animation: none;
                animation: none;
            }
}

@-webkit-keyframes lemon-white {
    0% {
        color: #DFB72C;
    }

    100% {
        color: white;
    }
}

@keyframes lemon-white {
    0% {
        color: #DFB72C;
    }

    100% {
        color: white;
    }
}

@-webkit-keyframes slideDown-fadeIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -400, 0, 1);
        opacity: 0;
    }

    4% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -227.213, 0, 1);
    }

    7.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -44.516, 0, 1);
    }

    11.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 75.765, 0, 1);
    }

    15.82% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 110.328, 0, 1);
        opacity: 1;
    }

    20.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 78.474, 0, 1);
    }

    24.92% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.745, 0, 1);
    }

    29.53% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.119, 0, 1);
    }

    34.03% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.704, 0, 1);
    }

    43.14% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.859, 0, 1);
    }

    52.15% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.958, 0, 1);
    }

    70.37% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.747, 0, 1);
    }

    88.59% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.439, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@keyframes slideDown-fadeIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -400, 0, 1);
        opacity: 0;
    }

    4% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -227.213, 0, 1);
    }

    7.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -44.516, 0, 1);
    }

    11.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 75.765, 0, 1);
    }

    15.82% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 110.328, 0, 1);
        opacity: 1;
    }

    20.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 78.474, 0, 1);
    }

    24.92% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.745, 0, 1);
    }

    29.53% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.119, 0, 1);
    }

    34.03% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.704, 0, 1);
    }

    43.14% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.859, 0, 1);
    }

    52.15% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.958, 0, 1);
    }

    70.37% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.747, 0, 1);
    }

    88.59% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.439, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@-webkit-keyframes scaleYIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.432, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    7.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    11.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.189, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    15.82% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    20.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.196, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.92% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.53% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    34.03% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    43.14% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    70.37% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    88.59% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes scaleYIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.432, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    7.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    11.91% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.189, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    15.82% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    20.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.196, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.92% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.53% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    34.03% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    43.14% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    70.37% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    88.59% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@-webkit-keyframes scaleX-slideInLeft {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 0;
    }

    5.71% {
        transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -44.297, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -45.449, 0, 0, 1);
    }

    11.31% {
        transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -42.536, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.889, 0, 0, 1);
    }

    17.02% {
        transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.059, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -23.316, 0, 0, 1);
    }

    22.62% {
        transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.419, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.822, 0, 0, 1);
    }

    28.33% {
        transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.859, 0, 0, 1);
    }

    33.93% {
        transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.401, 0, 0, 1);
        opacity: 1;
    }

    37.54% {
        transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.162, 0, 0, 1);
    }

    45.15% {
        transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.335, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.109, 0, 0, 1);
    }

    72.57% {
        transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.773, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.613, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@keyframes scaleX-slideInLeft {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 0;
    }

    5.71% {
        transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -44.297, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -45.449, 0, 0, 1);
    }

    11.31% {
        transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -42.536, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.889, 0, 0, 1);
    }

    17.02% {
        transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.059, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -23.316, 0, 0, 1);
    }

    22.62% {
        transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.419, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.822, 0, 0, 1);
    }

    28.33% {
        transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.859, 0, 0, 1);
    }

    33.93% {
        transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.401, 0, 0, 1);
        opacity: 1;
    }

    37.54% {
        transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.162, 0, 0, 1);
    }

    45.15% {
        transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.335, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.109, 0, 0, 1);
    }

    72.57% {
        transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.773, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.613, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@-webkit-keyframes scaleX-slideInRight {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 0;
    }

    5.71% {
        transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 44.297, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 45.449, 0, 0, 1);
    }

    11.31% {
        transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 42.536, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.889, 0, 0, 1);
    }

    17.02% {
        transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.059, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.316, 0, 0, 1);
    }

    22.62% {
        transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.419, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.822, 0, 0, 1);
    }

    28.33% {
        transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.859, 0, 0, 1);
    }

    33.93% {
        transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.401, 0, 0, 1);
        opacity: 1;
    }

    37.54% {
        transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.162, 0, 0, 1);
    }

    45.15% {
        transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.335, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.109, 0, 0, 1);
    }

    72.57% {
        transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.773, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.613, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@keyframes scaleX-slideInRight {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 0;
    }

    5.71% {
        transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 44.297, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 45.449, 0, 0, 1);
    }

    11.31% {
        transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 42.536, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.889, 0, 0, 1);
    }

    17.02% {
        transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.059, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.316, 0, 0, 1);
    }

    22.62% {
        transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.419, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.822, 0, 0, 1);
    }

    28.33% {
        transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.859, 0, 0, 1);
    }

    33.93% {
        transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.401, 0, 0, 1);
        opacity: 1;
    }

    37.54% {
        transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.162, 0, 0, 1);
    }

    45.15% {
        transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.335, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.109, 0, 0, 1);
    }

    72.57% {
        transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.773, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.613, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@-webkit-keyframes slideInUp-fadeIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1);
        opacity: 0;
    }

    5.81% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 51.656, 0, 1);
    }

    11.61% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 11.991, 0, 1);
    }

    17.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.985, 0, 1);
    }

    23.12% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -14.246, 0, 1);
    }

    30.33% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.789, 0, 1);
    }

    37.44% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.262, 0, 1);
    }

    44.54% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.625, 0, 1);
        opacity: 1;
    }

    51.65% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.624, 0, 1);
    }

    80.28% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.185, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@keyframes slideInUp-fadeIn {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1);
        opacity: 0;
    }

    5.81% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 51.656, 0, 1);
    }

    11.61% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 11.991, 0, 1);
    }

    17.42% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.985, 0, 1);
    }

    23.12% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -14.246, 0, 1);
    }

    30.33% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.789, 0, 1);
    }

    37.44% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.262, 0, 1);
    }

    44.54% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.625, 0, 1);
        opacity: 1;
    }

    51.65% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.624, 0, 1);
    }

    80.28% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.185, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}

@-webkit-keyframes bounceIn-rotate {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4% {
        transform: matrix3d(0.174, -0.395, 0, 0, 0.395, 0.174, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.405, -0.588, 0, 0, 0.588, 0.405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    7.91% {
        transform: matrix3d(0.583, -0.67, 0, 0, 0.67, 0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    11.91% {
        transform: matrix3d(0.965, -0.695, 0, 0, 0.695, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(1.006, -0.681, 0, 0, 0.681, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    15.82% {
        transform: matrix3d(1.145, -0.564, 0, 0, 0.564, 1.145, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(1.159, -0.435, 0, 0, 0.435, 1.159, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    20.42% {
        transform: matrix3d(1.137, -0.371, 0, 0, 0.371, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.92% {
        transform: matrix3d(1.034, -0.23, 0, 0, 0.23, 1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(1.032, -0.227, 0, 0, 0.227, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.53% {
        transform: matrix3d(0.949, -0.142, 0, 0, 0.142, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    34.03% {
        transform: matrix3d(0.926, -0.095, 0, 0, 0.095, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    37.54% {
        transform: matrix3d(0.941, -0.071, 0, 0, 0.071, 0.941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    43.14% {
        transform: matrix3d(0.984, -0.045, 0, 0, 0.045, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(1.016, -0.025, 0, 0, 0.025, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(1.017, -0.021, 0, 0, 0.021, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    70.37% {
        transform: matrix3d(0.996, -0.003, 0, 0, 0.003, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.997, -0.002, 0, 0, 0.002, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    88.59% {
        transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes bounceIn-rotate {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4% {
        transform: matrix3d(0.174, -0.395, 0, 0, 0.395, 0.174, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.31% {
        transform: matrix3d(0.405, -0.588, 0, 0, 0.588, 0.405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    7.91% {
        transform: matrix3d(0.583, -0.67, 0, 0, 0.67, 0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    11.91% {
        transform: matrix3d(0.965, -0.695, 0, 0, 0.695, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    12.51% {
        transform: matrix3d(1.006, -0.681, 0, 0, 0.681, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    15.82% {
        transform: matrix3d(1.145, -0.564, 0, 0, 0.564, 1.145, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.82% {
        transform: matrix3d(1.159, -0.435, 0, 0, 0.435, 1.159, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    20.42% {
        transform: matrix3d(1.137, -0.371, 0, 0, 0.371, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.92% {
        transform: matrix3d(1.034, -0.23, 0, 0, 0.23, 1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25.03% {
        transform: matrix3d(1.032, -0.227, 0, 0, 0.227, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.53% {
        transform: matrix3d(0.949, -0.142, 0, 0, 0.142, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    34.03% {
        transform: matrix3d(0.926, -0.095, 0, 0, 0.095, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    37.54% {
        transform: matrix3d(0.941, -0.071, 0, 0, 0.071, 0.941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    43.14% {
        transform: matrix3d(0.984, -0.045, 0, 0, 0.045, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    50.05% {
        transform: matrix3d(1.016, -0.025, 0, 0, 0.025, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(1.017, -0.021, 0, 0, 0.021, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    70.37% {
        transform: matrix3d(0.996, -0.003, 0, 0, 0.003, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    75.08% {
        transform: matrix3d(0.997, -0.002, 0, 0, 0.002, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    88.59% {
        transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Nunito", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f3f4f6;
}

.container {
    display: flex;
    width: 100%;
    max-width: 940px;
    background-color: #eeeeee;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.left {
    flex: 1;
    padding: 0px;
    display: flex;
    flex-direction: column;  
    margin-left: 90px;
    margin-top: 80px;
}

    .left h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
        width: 250px;
    }

    .left p {
        margin-bottom: 70px;
        color: #7a7a7a;
        width: 288px;
        font-size: 14px;
    }

    .left form {
        display: flex;
        flex-direction: column;
    }

   /* .left input[type="email"],
    .left input[type="password"] {
        padding: 10px;
        margin-bottom: 25px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
        width: 295px;
    }*/

    .left button {
        padding: 10px;
        background-color: #1a202c;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        margin-bottom: 20px;
        width: 295px;
        margin-top: 15px;
    }

        .left button:hover {
            background-color: #2d3748;
        }
.right {
    flex: 1;
    width: 300px;
    height: 580px;
    /* background-image: url(../Images/pexels-pavel-danilyuk-6753493.jpg);*/
    /* background-image: url('../Images/pexels-introspectivedsgn-9391904.jpg');*/
/*    background-image: url('../Images/Ams_image.jpeg');*/
    background-image: url('../Images/ambu.JPG');
    background-size: cover;
    background-position: center;
    margin: 15px;
    border-radius: 10px;
}


@media only screen and (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 10px;
        border-radius: 8px;
        flex-direction: column-reverse;
        height: 100%;
    }

    .right {
        margin: 10px;
        width: 95%;
        height: 200px;
        border-radius: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    }

    .left {
        margin-left: 15px;
        margin-top: auto;
    }

        .left p {
            margin-bottom: 35px;
        }

    .inputField {
        width: 365px !important;
        padding: 17px 15px !important;
        font-size: 16px;
    }

    .left button {
        padding: 17px;
        font-size: 1rem;
        cursor: pointer;
        margin-bottom: 20px;
        width: 362px;
        margin-top: 0px;
    }
}
@media only screen and (max-width: 480px) {
    .container {
        max-width: 100%;
        padding: 10px;
        border-radius: 8px;
        flex-direction: column-reverse;
        height: 100%;
    }

    .right {
        margin: 10px;
        width: 95%;
        height: 200px;
        border-radius: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    }

    .left {
        margin-left: 15px;
        margin-top: auto;
    }

        .left p {
            margin-bottom: 35px;
        }

    .inputField {
        width: 325px !important;
        padding: 17px 15px !important;
        font-size: 16px;
    }

    .left button {
        padding: 17px;
        font-size: 1rem;
        cursor: pointer;
        margin-bottom: 20px;
        width: 325px;
        margin-top: 0px;
    }
}

.inputContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inputField {
    width: 295px;
    border: 2px solid white;
    background-color: #f6dd5b;
    border-radius: 10px;
    padding: 12px 15px;
    color: black;
    font-weight: 500;
    outline: none;
    caret-color: rgb(155, 78, 255);
    transition-duration: .3s;
    font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 30px;
}

.userIcon {
    position: absolute;
    fill: rgb(155, 78, 255);
    width: 12px;
    top: -23px;
    left: -15px;
    opacity: 0;
    transition: .2s linear;
}

.usernameLabel {
    position: absolute;
    top: -25px;
    left: 5px;
    color: #6c5959;
    font-size: 14px;
    font-weight: 400;
    font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    transition: .2s linear;
    opacity: 0;
}

.inputField:focus ~ .usernameLabel,
.inputField:valid ~ .usernameLabel {
    transform: translateX(20px);
    opacity: 1;
}

.inputField:focus ~ .userIcon,
.inputField:valid ~ .userIcon {
    transform: translateX(20px);
    opacity: 1;
}

.inputField:focus,
.inputField:valid {
    background-color: #ddd;
    transition-duration: .3s;
}

/* =====================================================================
   Photo Punching - Punch Attendance button on the login screen.
   Added 31-08-2026. Scoped to the new elements so the existing sign in
   button and layout are untouched.
   ===================================================================== */

.punchDivider {
    display: flex;
    align-items: center;
    width: 295px;
    margin: 2px 0 14px 0;
    color: #9aa0a6;
    font-size: 13px;
}

    .punchDivider::before,
    .punchDivider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e2e2e2;
    }

    .punchDivider span {
        padding: 0 12px;
    }

.left button.punchButton {
    background-color: #fff;
    color: #1a202c;
    border: 2px solid #1a202c;
    font-weight: 700;
    margin-top: 0;
}

    .left button.punchButton:hover {
        background-color: #1a202c;
        color: #fff;
    }